<template>
	<view>
		<view class="address-top">
			<text class="address-title">当前位置</text>
			<text class="address-name">{{currentAddress}}</text>
		</view>
		<view class="address-middle">
			<view class="address-middle-title">热门位置</view>
			<view class="address-middle-select">
				<view class="address-middle-wrap" v-for="(item,index) in hotAddress">
					<view :class="['address-middle-inner',{selected:item.addressName == currentAddress}]"  @tap="addressBtn(item)">{{item.addressName}}</view>
				</view>
			</view>
		</view>
		<view class="address-bottom">
			<view class="address-bottom-list" v-for="(item,index) in addressList">
				<view class="address-list-title">{{item.addressA}}</view>
				<view class="address-list-content" @tap="addressBtn(item)">{{item.addressName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotAddress:[
					{addressName:'佛山',id:1},
					{addressName:'清远',id:4},
					{addressName:'广州',id:5}
				],
				addressList:[
					{
						addressA:'D',
						addressName:'东莞',
						id:2
					},
					{
						addressA:'F',
						addressName:'佛山',
						id:1
					},
					{
						addressA:'G',
						addressName:'广州',
						id:5
					},
					{
						addressA:'H',
						addressName:'惠州',
						id:3
					},
					{
						addressA:'Q',
						addressName:'清远',
						id:4
					}
				],
				currentAddress:''
			}
		},
		onLoad(option) {
			console.log(option)
			this.$data.currentAddress = option.address
		},
		methods: {
			addressBtn(n){
				console.log('addd')
				uni.setStorageSync('address',n.addressName)
				uni.setStorageSync('address_id',n.id)
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	.address-top{
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 30rpx;
	}
	.address-title{
		font-size: 24rpx;
		color: #979797;
		margin-right: 30rpx;
	}
	.address-name{
		font-size: 28rpx;
		color: #494949;
	}
	.address-middle{
		background-color: #f3f3f3;
		padding: 45rpx 30rpx;
	}
	.address-middle-title{
		font-size: 24rpx;
		color: #979797;
	}
	.address-middle-select{
		display: flex;
		padding: 0 20rpx;
	}
	.address-middle-wrap{
		flex: 1;
		padding:0 15rpx;
	}
	.address-middle-inner{
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border-radius: 4rpx;
		font-size: 28rpx;
		color: #494949;
		background-color: #fff;
		margin-top: 25rpx;
		
	}
	.address-middle-inner.selected{
		color: #fff;
		background-color: #e0393d;
	}
	.address-list-title{
		height: 60rpx;
		line-height: 60rpx;
		background-color: #f3f3f3;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #979797;
	}
	.address-list-content{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 28rpx;
		color: #494949;
		padding: 0 45rpx;
	}
</style>
